<!--审批底部栏-->
<template>
  <div>
    <!--申请开始-->
    <kaoqinApply v-if="currIndex==0"></kaoqinApply>
    <!--申请结束-->
    <!--我发起的开始-->
    <kaoqinApplyPass v-if="currIndex==1"></kaoqinApplyPass>
    <!--我发起的结束-->
    <!--我审批的开始-->
    <needapprove v-if="currIndex==2"></needapprove>
    <!--我审批的结束-->
    <!--抄送我的开始-->
    <copyTome v-if="currIndex==3"></copyTome>
    <!--抄送我的结束-->
    <!--tabbar开始-->
    <van-tabbar v-model="active" active-color="#07c160" inactive-color="#000">
      <van-tabbar-item
        v-for="(item,index) in tabbarList"
        :key="index"
        @click="Changetab(index,item.name)"
      >
        <span :class="currIndex == index ? active:''">{{item.text}}</span>
        <template slot="icon" slot-scope="props">
          <img :src="props.active ? item.active : item.normal" />
        </template>
      </van-tabbar-item>
    </van-tabbar>
    <!--tabbar结束-->
  </div>
</template>
<script>
import kaoqinApply from "./approveType";
import kaoqinApplyPass from "./attendanceApplyCount";
import needapprove from "./needapprove";
import copyTome from "./copyTome";
export default {
  components: { kaoqinApply, kaoqinApplyPass, needapprove, copyTome },
  data() {
    return {
      currIndex: 0,
      active: 0,
      tabbarList: [
        {
          name: "home",
          text: "申请",
          normal: require("../../../static/image/apply_icon_hui.png"),
          active: require("../../../static/image/apply_icon.png")
        },
        {
          name: "count",
          text: "我发起的",
          normal: require("../../../static/image/approve_fq_hui.png"),
          active: require("../../../static/image/approve_fq.png")
        },
        {
          name: "needcount",
          text: "我审批的",
          normal: require("../../../static/image/approve_sp_hui.png"),
          active: require("../../../static/image/approve_sp.png")
        },
        {
          name: "chaosong",
          text: "抄送我的",
          normal: require("../../../static/image/approve_cs_hui.png"),
          active: require("../../../static/image/approve_cs.png")
        }
      ]
    };
  },
  methods: {
    Changetab(index, val) {
      this.currIndex = index;
      //console.log("active", this.active);
      //console.log(this.currIndex);
      localStorage.setItem("approve-tab", this.currIndex);
    },
    backbutton() {
      if (this.$route.path == "/approveIndex") {
        this.$router.push({
          path: "/home"
        });
      } else {
        history.back();
      }
    }
  },

  destroyed() {
    var that = this;
    document.removeEventListener("backbutton", that.backbutton, false);
  },
  mounted() {
    if (localStorage.getItem("approve-tab")) {
      var current = localStorage.getItem("approve-tab");
      this.active = parseInt(current);
      this.currIndex = parseInt(current);
      // console.log("nage", current, this.active, this.currIndex);
    }
    var that = this;
    document.addEventListener("backbutton", that.backbutton, false);
  }
};
</script>
<style lang="less" scoped>
.active_tab img {
  width: 26px;
  height: 26px;
}
</style>